<script>
import {viewSpecs, totalValue} from "@/views/modals/specsRows.config";
import request from "@/utils/request";
import {message} from "ant-design-vue";
import {getTMCTotal} from "@/views/home/config";
import moment from "moment/moment";

export default {
  name: "editSpecsModal",
  data() {
    return {
      dialogFormVisible: false,
      viewSpecs,
      modalTitle: '',
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      viewData: {},
      rowHeight: 24
    }
  },
  methods: {
    show(data) {
      this.modalTitle = data.projectName + ' Specs'
      this.viewData = { ...data }
      this.dialogFormVisible = true
    },
    getPopoverData(rowData) {
      let { field, unit, type } = rowData
      if (typeof field === "string") {
        let data = this.doGetPopoverData(field);
        data = data + ' ' + (data ? (unit || '') : '')
        return type === 'date' ? moment(data.split('T')[0]).format('YYYY-MM') : data
      }
      if (field instanceof Array) {
        const list = field.map(item => {
          return this.doGetPopoverData(item)
        })
        let str = ''
        list.forEach((data) => {
          if (data !== '') {
            str += str !== '' ? ` x ${data}` : data
          }
        })
        return str === '' ? '' : `${str} ${unit}`
      }
      return ''
    },
    doGetPopoverData(row) {
      if (typeof row === "string") {
        if (row.includes('.')) {
          const strArr = row.split('.')
          let data = this.viewData[strArr[0]]
          // 如果是对象的，则取 price
          data = data ? data[strArr[1]] : ''
          if (typeof data === 'object') {
            return data.price || ''
          }
          return data
        }
        return this.viewData[row]
      }
      return ''
    },
  }
}

</script>

<template>
  <a-modal v-model:open="dialogFormVisible" width="42vw" :title="modalTitle">
    <ul class="view-specs-ul">
      <li v-for="(specItem, specIndex) in viewSpecs" :key="specIndex">
        <div class="view-specs-label" :style="{ height: `${rowHeight * (specItem.children ? specItem.children.length : 1)}px`, paddingLeft: '10px' }">{{ specItem.label }}</div>
        <div>
          <template v-if="specItem.children">
            <div v-for="(child, childIndex) in specItem.children" :key="childIndex" class="view-specs-row" :style="{ height: `${rowHeight}px`, lineHeight: `${rowHeight}px` }">
              <span class="view-specs-label view-specs-child-label">{{ child.label }}</span>
              <span style="padding-left: 15px;">{{ getPopoverData(child) }}</span>
            </div>
          </template>
          <div v-else style="display: flex; align-items: center;">
            <div class="view-specs-label" :style="{ height: `${rowHeight}px` }"></div>
            <span style="padding-left: 10px;">{{ getPopoverData(specItem) }}</span>

          </div>
        </div>
      </li>
    </ul>
  </a-modal>
</template>

<style scoped lang="scss">
.view-specs-ul{
  padding-left: 0;
  margin-left: 0;
  li{
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ffffff;
    width: 100%;
    background: #dddddd;
    &:hover{
      background: #f17979;
      .view-specs-label{
        background: #f17979;
      }
    }
    .view-specs-row{
      display: flex;
      align-items: center;
    }
    .view-specs-label{
      background: #6ecefe;
      display: inline-flex;
      align-items: center;
      width: 6vw;
      flex-shrink: 0;
    }
    .view-specs-child-label{
      justify-content: right;
      padding-right: 10px;
      color: #333;
    }
  }
}
</style>
